<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<style>
    ul {
        list-style: none;
    }
</style>

<body>
    <ul>
        <li>全选<input type='checkbox' id='all'></li>
        <li>Java<input type='checkbox' class='item'></li>
        <li>javaScript<input type='checkbox' class='item'></li>
        <li>C++<input type='checkbox' class='item'></li>
        <li>python<input type='checkbox' class='item'></li>
        <li>.net<input type='checkbox' class='item'></li>
    </ul>


    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        
        必知必会

        var all = document.getElementById("all")
        var options = Array.from(document.querySelectorAll(".item"))
        all.onchange = () => {
            options.forEach((item) => {
                item.checked = all.checked
            })
        }
        options.forEach((item) => {
            item.onchange = function () {
                let isCheckAll = true
                options.forEach((item) => {
                    if (!item.checked) {
                        isCheckAll = false
                    }
                })
                all.checked = isCheckAll
            }
        })
    </xmp>



    <script>
        var all = document.getElementById("all")
        var options = Array.from(document.querySelectorAll(".item"))
        all.onchange = () => {
            options.forEach((item) => {
                item.checked = all.checked
            })
        }
        options.forEach((item) => {
            item.onchange = function () {
                let isCheckAll = true
                options.forEach((item) => {
                    if (!item.checked) {
                        isCheckAll = false
                    }
                })
                all.checked = isCheckAll
            }
        })
    </script>
</body>

</html>